<link th:href="@{admin/plugins/wangeditor5/style.min.css}" rel="stylesheet">
<style>
    #editor—wrapper {
        border: 1px solid #ccc;
        z-index: 100; /* 按需定义 */
    }
    #toolbar-container { border-bottom: 1px solid #ccc; }
    #editor-container { height: 800px; }
</style>

<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0 text-dark">发布/编辑文章</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a th:href="@{admin}">首页</a></li>
                    <li class="breadcrumb-item active">文章管理</li>
                    <li class="breadcrumb-item active">发布/编辑文章</li>
                </ol>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>
<!-- Main content -->
<section class="content">
    <div class="card card-info p-3">
        <form id="articleForm" class="row">
            <input th:value="${article?.id}" type="hidden" name="id">
            <input id="status" type="hidden" name="status">
            <input id="articleContent" type="hidden" name="content" th:value="${article?.content}">
            <input id="articleContentMd" type="hidden" name="contentMd">
            <div class="col-lg-8">
                <div class="form-group">
                    <input type="text" class="form-control" id="title" name="title" th:value="${article?.title}"
                           placeholder="请输入文章标题">
                </div>
                <div class="form-group">
                    <div id="editor—wrapper">
                        <div id="toolbar-container"><!-- 工具栏 --></div>
                        <div id="editor-container"><!-- 编辑器 --></div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 p-3" style="border: 1px solid #ddd;border-radius: 4px;">
                <div class="form-group col-xs-12">
                    <label class="control-label">文章分类:</label>
                    <select id="category-select" class="form-control" name="categoryId" required>
                        <block th:each="category: ${categories}">
                            <option th:if="${#lists.isEmpty(category.children)}" th:value="${category.id}" th:label="${category.name}" th:selected="${article?.categoryId == category.id}"></option>
                            <optgroup th:unless="${#lists.isEmpty(category.children)}" th:label="${category.name}">
                                <option th:each="child: ${category.children}" th:value="${child.id}" th:label="${child.name}" th:selected="${article?.categoryId == child.id}"></option>
                            </optgroup>
                        </block>
                    </select>
                </div>
                <div class="form-group col-xs-12" style="display: none;">
                    <label class="control-label label-four">文章标签:</label>
                    <div>
                        <div class="icheck-primary icheck-inline">
                            <input type="checkbox" id="tag_1" name="tag" value="1"
                                   checked="checked"/>
                            <label for="tag_1">默认标签</label>
                        </div>
                    </div>
                </div>
                <div class="form-group col-xs-12">
                    <label class="control-label label-four">文章封面:</label>
                    <div class="input-group">
                        <input type="text" class="form-control" name="coverImage" id="coverImage"
                               th:value="${article?.coverImage}"
                               placeholder="文章封面地址">
                        <div id="upload-img-btn" class="btn btn-default input-group-btn" style="min-width: 50px">
                            <i class="fas fa-cloud-upload-alt"></i>
                        </div>
                    </div>
                </div>
                <div id="upload-cover-content" class="form-group col-md-12 hidden">
                    <div class="upload-item">
                        <p class="upload-title">封面图</p>
                        <p class="upload-file"><i class="fa fa-cloud-upload fz-70"></i></p>
                        <p class="upload-btns"><a type="button"
                                                  class="btn btn-sm btn-block btn-info coverUploader">上传</a>
                        </p></div>
                </div>

                <div class="form-group col-xs-12">
                    <label class="control-label label-four">文章类型:</label>
                    <div class="ml-3">
                        <div class="icheck-primary icheck-inline">
                            <input type="radio" id="artile_source_original" name="original" value="1"
                                   th:field="*{article.original}"/>
                            <label for="artile_source_original">原创</label>
                        </div>
                        <div class="icheck-primary icheck-inline">
                            <input type="radio" id="artile_source_reprint" name="original" value="0"
                                   th:field="*{article.original}"/>
                            <label for="artile_source_reprint">转载</label>
                        </div>
                    </div>
                </div>
                <div class="form-group col-xs-12">
                    <label class="control-label">是否轮播:</label>
                    <div class="ml-3">
                        <div class="icheck-primary icheck-inline">
                            <input type="radio" id="slider_on" name="slider" value="1" th:field="*{article.slider}"/>
                            <label for="slider_on">是</label>
                        </div>
                        <div class="icheck-primary icheck-inline">
                            <input type="radio" id="slider_off" name="slider" value="0" th:field="*{article.slider}"/>
                            <label for="slider_off">否</label>
                        </div>
                    </div>
                </div>
                <div id="sliderImgContent"
                     th:class="${article?.slider == 1 ? 'form-group col-md-12':'form-group col-md-12 hidden'}">
                    <div class="col-xs-12">
                        <label class="control-label label-four">轮播图:</label>
                        <div class="input-group ml80" style="position: relative">
                            <input id="sliderImg" type="text" class="form-control" name="sliderImg"
                                   th:value="${article.sliderImg}"
                                   placeholder="轮播图地址（建议800*300）">
                            <div id="upload-slider-btn" class="btn btn-default" style="min-width: 50px">
                                <i class="fas fa-cloud-upload-alt"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="upload-slider-content" class="form-group col-md-12 hidden">
                    <div class="upload-item">
                        <p class="upload-title">轮播图</p>
                        <p class="upload-file"><i class="fa fa-cloud-upload fz-70"></i></p>
                        <p class="upload-btns"><a type="button"
                                                  class="btn btn-sm btn-block btn-info sliderUploader">上传</a></p>
                    </div>

                    <br>
                    <label class="control-label label-four">轮播排序:</label>
                    <div class="input-group ml80" style="position: relative">
                        <input id="sliderOrder" type="text" class="form-control" name="sliderOrder"
                               th:value="${article.sliderOrder}"
                               placeholder="轮播排序，数字">
                    </div>
                </div>
                <div class="form-group col-xs-12">
                    <label class="control-label">是否置顶:</label>
                    <div class="ml-3">
                        <div class="icheck-primary icheck-inline">
                            <input type="radio" id="top_on" name="top" value="1" th:field="*{article.top}"/>
                            <label for="top_on">是</label>
                        </div>
                        <div class="icheck-primary icheck-inline">
                            <input type="radio" id="top_off" name="top" value="0" th:field="*{article.top}"/>
                            <label for="top_off">否</label>
                        </div>
                    </div>
                </div>
                <div class="form-group col-xs-12">
                    <label class="control-label">是否推荐:</label>
                    <div class="ml-3">
                        <div class="icheck-primary icheck-inline">
                            <input type="radio" id="recommended_on" name="recommended" value="1"
                                   th:field="*{article.recommended}"/>
                            <label for="recommended_on">是</label>
                        </div>
                        <div class="icheck-primary icheck-inline">
                            <input type="radio" id="recommended_off" name="recommended" value="0"
                                   th:field="*{article.recommended}"/>
                            <label for="recommended_off">否</label>
                        </div>
                    </div>
                </div>
                <div class="form-group col-xs-12">
                    <label class="control-label">开启评论:</label>
                    <div class="ml-3">
                        <div class="icheck-primary icheck-inline">
                            <input type="radio" id="comment_on" name="comment" value="1"
                                   th:field="*{article.comment}"/>
                            <label for="comment_on">是</label>
                        </div>
                        <div class="icheck-primary icheck-inline">
                            <input type="radio" id="comment_off" name="comment" value="0"
                                   th:field="*{article.comment}"/>
                            <label for="comment_off">否</label>
                        </div>
                    </div>
                </div>

                <div class="form-group col-xs-12">
                    <label class="control-label">概要:</label>
                    <div class="ml-3">
                                <textarea type="text" rows="2" class="form-control" name="description"
                                          th:text="${article?.description}"
                                          placeholder="文章概要"></textarea>
                    </div>
                </div>
                <div class="form-group col-xs-12">
                    <label class="control-label">关键词:</label>
                    <div class="ml-3">
                            <textarea type="text" rows="2" class="form-control" name="keywords"
                                      th:text="${article?.keywords}"
                                      placeholder="文章关键词（SEO优化）"></textarea>
                    </div>
                </div>
                <div class="form-group col-xs-12">
                    <label class="control-label">展现时间:</label>
                    <div class="ml-3">
                        <input type="text" id="showDate" name="showDate" class="form-control" th:value="${#dates.format(article?.showDate, 'yyyy-MM-dd HH:mm')}" placeholder="请输入开始展现时间，默认当前时间">
                    </div>
                </div>
                <div class="form-group col-xs-12">
                    <label class="control-label">页头模板:</label>
                    <select id="template-head-select" class="form-control" name="templateHeadId">
                        <option value="">可选择页头模板</option>
                        <option th:each="head: ${headTemplates}" th:value="${head.id}" th:label="${head.title}" th:selected="${article?.templateHeadId == head.id}"></option>
                    </select>
                </div>
                <div class="form-group col-xs-12">
                    <label class="control-label">页尾模板:</label>
                    <select id="template-tail-select" class="form-control" name="templateTailId">
                        <option value="">可选择页尾模板</option>
                        <option th:each="tail: ${tailTemplates}" th:value="${tail.id}" th:label="${tail.title}" th:selected="${article?.templateTailId == tail.id}"></option>

                    </select>
                </div>
                <div class="form-group mt-4">
                    <div class="row">
                        <button type="button" th:if="${article?.id == null}" class="btn btn-primary btn-lg col-md-4 offset-1"
                                onclick="addOrUpdateArticle(2, true)">提交审核
                        </button>
                        <button type="button" th:if="${article?.id == null}" class="btn btn-secondary btn-lg col-md-4 offset-2"
                                onclick="addOrUpdateArticle(0, true)">保存草稿
                        </button>
                        <button type="button" th:unless="${article?.id == null}" class="btn btn-primary btn-lg col-md-4 offset-2"
                                onclick="addOrUpdateArticle(2, false)">提交审核
                        </button>
                        <button type="button" th:unless="${article?.id == null}" class="btn btn-secondary btn-lg col-md-4 offset-2"
                                onclick="addOrUpdateArticle(0, false)">更新草稿
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</section>

<script th:src="@{admin/plugins/wangeditor5/index.min.js}"></script>
<script>
    var E = window.wangEditor

    var editArticle = "[[${article.id!=null}]]"

    // Extend menu
    var MyMenu = class {
        constructor() {
            this.title = '附件'
            this.tag = 'button'
            this.showModal = true
            this.modalWidth = 300
        }
        getValue(editor) {
            return ''
        }
        isActive(editor) {
            return false // or true
        }
        isDisabled(editor) {
            return false // or true
        }
        exec(editor, value) {
            // do nothing 什么都不用做
        }
        getModalPositionNode(editor) {
            return null // modal 依据选区定位
        }
        getModalContentElem(editor) {
            const $container = $('<div></div>')

            const inputId = `input-${Math.random().toString(16).slice(-8)}`
            const buttonId = `button-${Math.random().toString(16).slice(-8)}`

            const $inputContainer = $(`<label class="babel-container">
            <span>附件</span>
            <input type="file" id="${inputId}" value="上传">
          </label>`)
            const $buttonContainer = $(`<div class="button-container">
            <button id="${buttonId}">确定</button>
          </div>`)

            $container.append($inputContainer).append($buttonContainer)

            $container.on('click', `#${buttonId}`, e => {
                e.preventDefault()

                const text = $(`#${inputId}`).val()
                if (!text) return

                let files = $(`#${inputId}`)[0].files;
                var fd = new FormData()
                fd.append('file',files[0])
                $.ajax({
                    method: 'POST',
                    url: '[[@{/attachment/upload}]]',
                    data: fd,
                    processData: false,
                    contentType: false,
                    success: function (res) {
                        console.log(res);
                        editor.restoreSelection() // 恢复选区
                        editor.dangerouslyInsertHtml('<a href="' + res.url + '">' + res.originalFileName + '</a>');
                        editor.insertText(' ')
                    }
                })
            })

            setTimeout(() => {
                $(`#${inputId}`).focus()
            })

            return $container[0]
        }
    }
    var myMenuConf = {
        key: 'myMenu',
        factory() {
            return new MyMenu()
        }
    }
    E.Boot.registerMenu(myMenuConf)

    window.editor = E.createEditor({
        selector: '#editor-container',
        content: [
            {
                type: 'paragraph',
                children: [
                    { text: '', fontFamily: '仿宋', fontSize: '16px'}
                ]
            },
        ],
        config: {
            placeholder: '今天分享什么内容呢...',
            MENU_CONF: {
                uploadImage: {
                    //上传文件参数名，与后台接收的参数名一致
                    fieldName: 'file',
                    // 10kb 以下插入 base64
                    base64LimitSize: 10 * 1024,
                    server: '/attachment/uploadImageForEditor',
                    onFailed: function (file, res) {
                        alert(res.message);
                    }
                },
                uploadVideo: {
                    fieldName: 'file',
                    server: '/attachment/uploadForEditor',
                    // 单个文件的最大体积限制，默认为 10M
                    maxFileSize: 200 * 1024 * 1024, // 200M
                }
            },
            onChange(editor) {
                // console.log(editor.getHtml())
            }
        }
    })

    window.toolbar = E.createToolbar({
        editor,
        selector: '#toolbar-container',
        config: {
            insertKeys: {
                index: 21, // 插入的位置，基于当前的 toolbarKeys
                keys: ['myMenu']
            }
        }
    });

    // 不显示全屏按钮
    // toolbar.config.excludeKeys = [
    //     'fullScreen'
    // ]

    // esc退出editor编辑器的全屏
    document.addEventListener('keyup', function(e) {
        if (e.keyCode == 27) {
            editor.unFullScreen()
        }
    });
</script>
<script>

    $(function () {
        initSliderUploadContent();
    })

    function initSliderUploadContent() {
        var showSlider = $("input[name=slider]:checked").val();
        if (parseInt(showSlider)) {
            $("#sliderImgContent").show();
        } else {
            $("#sliderImgContent").hide();
            $("#upload-slider-content").hide();
        }
    }

    function addOrUpdateArticle(status, addFlag) {
        if (validArticle()) {
            Core.confirm("确认保存文章？", function () {
                $("#status").val(status);
                if (addFlag) {
                    Core.postAjax("/article/add", $("#articleForm").serialize(), function (data) {
                        if (data.status === 200) {
                            editor.clear();
                            Core.load("#content", "article/add");
                        }
                        layer.msg(data.msg)
                    })
                } else {
                    Core.postAjax("/article/edit", $("#articleForm").serialize(), function (data) {
                        layer.msg(data.msg)
                    })
                }
            })
        }
    }

    function validArticle() {
        var content = editor.getHtml();
        if (content) {
            $("#articleContentMd").val(content);
            $("#articleContent").val(content);
            // 文章标签必填项校验
            var tags = [];
            $('input[name="tag"]:checked').each(function () {
                tags.push($(this).val());
            });
            if (tags.length > 0) {
                return true;
            } else {
                layer.msg("请选择文章标签！")
                return false;
            }
        } else {
            layer.msg("请输入文章内容！")
            return false;
        }
    }

    $(function () {
        /*上传图片*/
        $("#upload-img-btn").click(function () {
            $('#upload-cover-content').toggle()
        })

        $(".coverUploader").upload({
            server: '[[@{/attachment/upload}]]',
            swf: '/admin/img/Uploader.swf',
            imgAccept: true
        }, function (url, picker) {
            $("#coverImage").val(url);
            echoGtUploadResMethd(url, picker);
        });

        $("#upload-slider-btn").click(function () {
            $('#upload-slider-content').toggle()
            $(".sliderUploader").upload({
                server: '[[@{/attachment/upload}]]',
                swf: '/admin/img/Uploader.swf',
                imgAccept: true
            }, function (url, picker) {
                $("#sliderImg").val(url);
                echoGtUploadResMethd(url, picker);
            });
        })
        $('input[type=radio][name=slider]').change(function () {
            initSliderUploadContent()
        });

        if (editArticle=='true') {
            window.editor.setHtml($('#articleContent').val());
        };

        $('#showDate').daterangepicker({
                singleDatePicker: true,
                showDropdowns: true,
                autoUpdateInput: false,
                timePicker24Hour : true,
                timePicker : true,
                "locale": {
                    format: 'YYYY-MM-DD HH:mm',
                    applyLabel: "应用",
                    cancelLabel: "取消",
                    resetLabel: "重置",
                    monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
                        '七月', '八月', '九月', '十月', '十一月', '十二月']
                }
            },
            function(start) {
                beginTimeTake = start;
                if(!this.startDate){
                    this.element.val('');
                }else{
                    this.element.val(this.startDate.format(this.locale.format));
                }
            });
    })
</script>
